<template>
  <a-layout id="components-layout-demo-top-side-2" style="height:100vh;">
    <a-layout-header class="header">
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
        <h2><strong>好知网后台管理</strong></h2>
      </div>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          v-model:selectedKeys="selectedKeys2"
          v-model:openKeys="openKeys"
          :style="{ height: '100%', borderRight: 0 }"
          @click="handelClickLink"
        >
          <a-sub-menu key="sub1">
            <template v-slot:title>
              <span> <user-outlined />分类管理 </span>
            </template>
            <a-menu-item key="/category/create">分类编辑</a-menu-item>
            <a-menu-item key="/category/list">分类列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <template v-slot:title>
              <span> <laptop-outlined />课程管理 </span>
            </template>
            <a-menu-item key="/course/create">课程编辑</a-menu-item>
            <a-menu-item key="/course/list">课程列表</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 0 24px 24px">
        <a-breadcrumb style="margin: 16px 0"></a-breadcrumb>
        <a-layout-content
          :style="{
            background: '#fff',
            padding: '24px',
            margin: 0,
            minHeight: '280px'
          }"
        >
          <router-view :key="$route.path" />
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
</template>
<script>
import { UserOutlined, LaptopOutlined } from '@ant-design/icons-vue'
import Router from '../router'
export default {
  components: {
    UserOutlined,
    LaptopOutlined
  },
  data() {
    return {
      selectedKeys1: ['2'],
      selectedKeys2: ['1'],
      collapsed: false,
      openKeys: ['sub1']
    }
  },
  methods: {
    handelClickLink(item) {
      Router.push(`${item.key}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  display: flex;
  align-items: center;
  img {
    display: inline-block;
    height: 100%;
    width: auto;
    position: relative;
    top: -6px;
  }
  h2 {
    margin-left: 20px;
    color: aliceblue;
    font-size: 30px;
  }
}
</style>
